<template>
  <div style="display: flex; justify-content: center; flex-direction: column">
    <van-cell-group v-if="des.title">
      <van-cell title="订单号" :value="des.bills[0].id" />
      <van-cell title="订单时间" :value="des.bills[0].startTime" />
      <van-cell title="商品名称" :value="des.title" />
      <van-cell title="商品金额" :value="des.bills[0].money" />
    </van-cell-group>
    <van-button
      v-if="showPay"
      type="primary"
      @click="sendMessage"
      style="margin: 0.4rem auto 0; width: 64%"
      >点击支付
    </van-button>
    <div v-if="pullPay">
      <p v-html="pullPay"></p>
    </div>
  </div>
</template>

<script>
import { getOrderDes, getAuthorizePay } from "@/api/authentication";
export default {
  name: "wxpay",
  data() {
    return {
      orderId: "",
      showPay: true,
      des: {},
      clientId: "",
      pullPay: "",
    };
  },
  methods: {
    // 发起微信授权
    sendMessage() {
      const appId = "wxbc77d242ea533456"; //自己项目的appid
      const redirectUri = encodeURIComponent(
        `https://app.jindisc.com/wxpay?orderId=${this.$route.query.orderId}&clientId=${this.$route.query.clientId}`
      ); //页面回调地址
      const scope = "snsapi_base"; // 不弹出授权页面，直接跳转
      const state = this.$route.query.clientId;
      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
      window.location.href = authUrl; //这个跳转的链接上面会有code 我们在进行获取code
      console.log(authUrl);
    },
    getDetails() {
      if (this.$route.query.orderId) {
        this.orderId = this.$route.query.orderId;
        this.clientId = this.$route.query.clientId;
      }
      getOrderDes({
        orderId: this.orderId,
      })
        .then((res) => {
          console.log(res.data, "商品详情商品详情商品详情");
          this.des = res.data;
          this.payStart();
        })
        .catch((error) => {});
    },
    payStart() {
      if (this.$route.query.code) {
        getAuthorizePay({
          billNo: this.des.bills[0].id,
          clientId: this.clientId,
          orderPayType: "1",
          code: this.$route.query.code,
        })
          .then((res) => {
            // this.pullPay = res.data
            this.executeScript(res.data);
            console.log(res, "授权支付结果");
          })
          .catch((error) => {});
      }
    },
    executeScript(html) {
      // 创建一个div来解析HTML
      const div = document.createElement("div");
      div.innerHTML = html;

      // 获取所有的script标签
      const scripts = div.getElementsByTagName("script");

      // 遍历并执行每个script
      for (let i = 0; i < scripts.length; i++) {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.text = scripts[i].text;
        document.body.appendChild(script);
        document.body.removeChild(script);
      }
    },
  },
  created() {
    if (this.$route.query.code) {
      this.showPay = false;
    } else {
      this.showPay = true;
    }
    this.getDetails();
  },
};
</script>

<style></style>
